<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小说排行榜案例</title>
    <style>
      table {
        width: 600px;
        margin: 0 auto;
      }
      th,
      tr {
        height: 35px;
      }
      table,
      td,
      th {
        border: 1px solid pink;
        font-size: 14px;
        text-align: center;
        border-collapse: collapse;
      }

      /* css 设置隔行变色效果 */
      /* tbody tr:nth-child(2n) {
        background: #cccccc;
      } */

      /* hover 样式 */
      tbody tr:hover {
        background-color: #cccccc;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>排名</th>
          <th>关键词</th>
          <th>今日搜索</th>
          <th>最近七日</th>
          <th>相关链接</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>1</td>
          <td>鬼吹灯</td>
          <td>345</td>
          <td>123</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>盗墓笔记</td>
          <td>123</td>
          <td>5432463</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
        <tr>
          <td>3</td>
          <td>西游记</td>
          <td>212</td>
          <td>5432</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
        <tr>
          <td>4</td>
          <td>东游记</td>
          <td>232</td>
          <td>7978978</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
        <tr>
          <td>5</td>
          <td>东游记-2</td>
          <td>310</td>
          <td>1697803</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
        <tr>
          <td>6</td>
          <td>少年张三丰</td>
          <td>580</td>
          <td>482904</td>
          <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
